<template>
	<div>
		<el-transfer
			v-model="form.roleId"
			:props="{
				key: 'id',
				label: 'name'
			}"
			:data="roles"
			class="transfer"
		></el-transfer>
		<el-button type="primary" plain style="margin-top: 50px;" @click="save()" >保存</el-button>
	</div>
</template>

<script>
	import axios from '../../utils/axiosutils.js'
	
export default {
	name: 'UserRole',
	props:['editid'],
	data() {
		return {
			roles: [],
			form: {
				id:0,
				userId: 0,
				roleId: []
			}
		}
	},
	created() {
		this.form.id = this.editid;
		this.getData();
		this.getRoles();
	},
	methods: {
		getData() {
			axios.get(
				'/userRole/getByUserId',
				response => {
					if (response.obj) {
						this.form.id=response.obj.id;
						this.form.roleId = response.obj.roleId.split(',').map(Number);
						this.form.userId = response.obj.userId;
					}
				},
				{ id: this.form.id }
			);
		},
		getRoles() {
			axios.get(
				'/role/ids',
				response => {
					
					this.roles = response.obj;
					
				}
			);
		},
		save() {
			axios.post(
				'/userRole/save',
				response => {
					this.$emit('update:show', false);
					this.$emit('getData');
				},
				this.form
			);
		}
	}
};
</script>
<style scoped>
</style>
